<template>
  <div id="app">
      <main>
        <div v-for="(item,index) in foot" :key="index">
            <div :is="item.name" v-if="index==activeIndex"></div>
        </div>
      </main>
      <footer>
          <Footer :foot="foot" :activeIndex="activeIndex"></Footer>
      </footer>
      
  </div>
</template>

<script>
import Home from "./components/body/Home.vue"
import My from "./components/body/My.vue"
import Service from "./components/body/Service.vue"
import Shop from "./components/body/Shop.vue"
import Footer from "./components/Footer.vue"
import iconfont from "./assets/iconfont/iconfont.css"
// import Mock from "mockjs";

// const data=Mock.mock({
//   "list|7":[{
//     title:"@ctitle(2)",
//     "children|4":[
//       {
//         img:"@image(100X150,@color)",
//         tit:"@ctitle",
//         name:"@cname",
//         "word|100-2000":20
//       }
//     ]
//   }]
// })
export default {
  name: 'App',
  data()
  {
    return{
      activeIndex:0,
      // list:data.list,
      foot:[
        {
          name:"Home",
          title:"首页"
        },
        {
          name:"My",
          title:"我的"
        },
        {
          name:"Service",
          title:"服务"
        },
        {
          name:"Shop",
          title:"购买"
        }
      ]
    }
  },
  components: {
    Home,
    My,
    Service,
    Shop,
    Footer,
    iconfont
  },
  mounted()
  {
    this.bus.$on("changeActive",(index)=>
    {
      this.activeIndex=index;
    })
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,#app{
  width: 100%;
  height: 100%;
}
#app{
  display: flex;
  flex-direction: column;
}
#app main{
  flex: 1;
  overflow-y:scroll ;
}
#app footer{
  width: 100%;
  height: 60px;
  background-color: rgb(58, 116, 192);
}
#app footer ul{
  display: flex;
  justify-content: space-around;
  line-height: 60px;
}
#app main ul{
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: space-around;
  color: rgb(172, 172, 172);
}
#app main dl{
    width: 48%;
    height: 320px;
    margin-top: 5px;
    float: left;
    margin-left: 5px;
    background-color: rgb(255, 242, 233);
}
#app main dl dt{
  text-align: center;
}
#app main dl dd:nth-of-type(1){
  font-weight: bold;
}
#app main dl dd:nth-of-type(2){
  font-size: 12px;
  margin-top: 25px;
}
#app main dl dd:nth-of-type(2) span:nth-of-type(2){
  margin-left: 75px;
}
</style>
